<template>
<div>
    <Header></Header>
    <tab-bar></tab-bar>
   <keep-alive :exclude="/playMusic/"><router-view></router-view>
   </keep-alive>

    <!--&lt;!&ndash;承载子路由的容器&ndash;&gt;  excluede 从内存里排除出去-->
    <!--keep-alive来缓存页面-->

    </div>
</template>

<script>
import Header from './components/Header/Header'
import TabBar from './components/TabBar/TabBar'

export default {
    data(){
       return{

       }
    },
    // upadte()虚拟dom上的更新到页面上
    created(){
        // 浏览器刷新时判断session里面是否存储state 有则取出使用
        if (sessionStorage.getItem('store')){
            // JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
            this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(sessionStorage.getItem('store'))))
        }
        //检测浏览器刷新动作 在刷新前存入vuex的state 浏览器的刷新所有组件重置
        window.addEventListener('beforeunload',()=>{
            sessionStorage.setItem('store',JSON.stringify(this.$store.state))
            // this.$store.state 是对象 不能直接存进去   要转化成字符串
        })
    },
  components: {
            Header,
            TabBar,
  }
}
</script>

<style>

</style>
